/**
 *
 * Copyright 2016-present reading
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react';
import PropTypes from 'prop-types';
import { View, ViewPropTypes, Text, TouchableOpacity, StyleSheet } from 'react-native';
import Button from './Button';
import colors from '../config/colors';

const propTypes = {
  cancelStyle: Text.propTypes.style,
  onPress: PropTypes.func,
  onConfirm: PropTypes.func,
  onCancel: PropTypes.func,
  confirmStyle: Text.propTypes.style,
  containerStyle: ViewPropTypes.style,
};

const BottomConfirmer = ({
  onPress,
  disabled,
  containerStyle,
  cancelStyle,
  confirmStyle,
  activeOpacity,
  confirmText,
  concelText,
  onConfirm,
  onCancel
}) => (
  <View style={[styles.containerStyle, containerStyle && containerStyle]} >
    <Button 
    onPress={() => onCancel()}
    text={concelText ? concelText : '取消'} 
    style={[styles.textStyle, styles.cancelTextStyle]}
    containerStyle={[styles.cancelStyle, cancelStyle && cancelStyle]} />
    <Button 
    onPress={() => onConfirm()}
    text= {confirmText ? confirmText : '确定'} 
    style={[styles.textStyle, styles.confirmTextStyle]}
    containerStyle={[styles.confirmStyle, confirmStyle && confirmStyle]} />
  </View>
);

BottomConfirmer.propTypes = propTypes;

BottomConfirmer.defaultProps = {
  onPress() {},
  onConfirm() {},
  onCancel() {},
};

const styles = StyleSheet.create({
  containerStyle: {
    flexDirection: 'row',
  },
  cancelStyle: {
    flex: 1,
    justifyContent: 'center',
    padding: 10,
    backgroundColor: 'white'
  },
  confirmStyle: {
    flex: 1,
    justifyContent: 'center',
    padding: 15,
    backgroundColor: colors.blue4
  },
  textStyle: {
    textAlign: 'center'
  },
  confirmTextStyle: {
    color: 'white'
  },
  cancelTextStyle: {
    color: colors.grey6
  }
})

export default BottomConfirmer;
